<template>
  <div class="box">
    <Select v-model="nowvalue" style="width:200px">
      <Option v-for="item in choose" :value="item" :key="item">{{
        item
      }}</Option>
    </Select>
    <Button class="Btn" type="primary" @click="showTab">查询</Button>
    <div ref="main" style="width: 600px;height:400px;"></div>
  </div>
</template>

<script>
import echarts from "echarts";

import { getClass } from "server/admin_k.js";
import { getUsernum } from "server/commuity.js";
export default {
  data() {
    return {
      nowvalue: "",
      sevenDayArr: [],
      OnemouthArr: [],
      nowUerNumArr: [],
      nowTime: [],
      choose: ["最近七天", "最近一月"],
    };
  },
  created() {
    for (let index = 0; index > -7; index--) {
      let nowday = this.getDay(index);
      this.sevenDayArr.push(nowday);
    }
    for (let index = 0; index > -30; index--) {
      let nowday = this.getDay(index);
      this.OnemouthArr.push(nowday);
    }
  },
  methods: {
    showTab() {
      let _this = this;
      if (this.nowvalue == "") {
        this.$Message["error"]({
          background: true,
          content: "请选择您要查看的时间",
        });
      } else {
        if (this.nowvalue == "最近七天") {
          getUsernum(this.sevenDayArr).then(function(res) {
            _this.renderView(res.data[0], res.data[1]);
          });
        } else {
          getUsernum(this.OnemouthArr).then(function(res) {
            _this.renderView(res.data[0], res.data[1]);
          });
        }
      }
    },
    renderView(h, z) {
      // 获得dom节点
      const dom = this.$refs.main;
      // 开始实例化
      const myChart = echarts.init(dom);
      var option = {
        title: {
          text: "用户注册表统计表",
        },
        tooltip: {},
        legend: {
          data: ["用户注册数量"],
        },
        xAxis: {
          data: h,
        },
        yAxis: {},
        series: [
          {
            name: "用户注册数",
            type: "bar",
            data: z,
          },
        ],
      };
      // 进行渲染

      myChart.setOption(option);
    },
    getDay(day) {
      var today = new Date();
      var targetday_milliseconds = today.getTime() + 1000 * 60 * 60 * 24 * day;
      today.setTime(targetday_milliseconds); //注意，这行是关键代码
      var tYear = today.getFullYear();
      var tMonth = today.getMonth();
      var tDate = today.getDate();
      tMonth = this.doHandleMonth(tMonth + 1);
      tDate = this.doHandleMonth(tDate);
      return tYear + "-" + tMonth + "-" + tDate;
    },
    doHandleMonth(month) {
      var m = month;
      if (month.toString().length == 1) {
        m = "0" + month;
      }
      return m;
    },
  },
};
</script>

<style scoped>
.box {
  width: 100%;
  height: 100%;
  min-width: 300px;
  min-height: 400px;
}
.Btn {
  margin-left: 10%;
}
</style>
